<template>
	<view class="fixtop">
		<fixtopVue>
			<template #l>
			<!-- 	<view class="fixtop-l" @click="back">
					<view class="iconfont icon-jiantouyou"></view>
				</view> -->
			</template>
			<template #c>
				<view class="fixtop-c">
					商品管理
				</view>
			</template>
		</fixtopVue>
	</view>
	<view class="producybox">
		<view class="nav">
			<view v-for="(i,index) in navdata" :key='index' :class="{borr:index==navindex}" @click="navchange(index)">
				{{i}}
			</view>
		</view>
		<view class="seach">
			<view class="seachbox">
				<view class="iconfont icon-sousuoxiao"></view>
				<input @confirm="seachok"  v-model="seachdata" type="text" placeholder="搜索" />
			</view>
		</view>
		<view class="prodctbox" v-if="navindex==0">
			<view class="pro">
				<view class="l">
					<view v-for="(i,index) in lxdata" :class="{selcetitem:currenttype==i.lx}" :key="i.id"
						@click="changetype(i.lx)">
						{{i.title}}
					</view>
				</view>
				<scroll-view class="r" scroll-y>
					<shopperitemVue :xiadata="xiadata" @xia="xiaproduct" :data="i" :ischeck="true" v-for="i in showmai" :key="i.id" />
					<view class="" v-if="!showmai.length"
						style="font-size: 25rpx;text-align: center;margin-top: 20rpx;">暂无该类型商品</view>
				</scroll-view>
			</view>
			<view class="probottom">
				<view class="" @click="goxia(3)">批量下架</view>
				<view class="" @click="fabuprofusects">发布商品</view>
			</view>
		</view>
		<view class="prodctbox" v-else>
			<view class="pro">
				<scroll-view class="r" scroll-y>
					<shopperitemVue :xiadata="xiadata"   @xia="xiaproduct" :data="i" :ischeck="true" v-for="i in showxia" :key="i.id" />
					<view class="" v-if="!showxia.length" style="font-size: 25rpx;text-align: center;margin-top: 20rpx;">
						暂无该类型商品</view>
				</scroll-view>
			</view>
			<view class="probottom">
				<view class=""  @click="goxia(1)">批量上架</view>
				<view class="">批量删除</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import fixtopVue from '../../components/fixtop/fixtop.vue';
	import shopperitemVue from '@/components/shopperitem/shopperitem.vue'
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	import {
		getgetlxinfos,
		getgetproductinfos,
		xiaproducts
	} from '@/api/index.js'
	import userstore from '@/store/userinfo.js'
		const useuserstore = userstore()
	const lxdata = ref()
	const offset = ref(1)
	const limit = ref(600)
	const shoperid = ref()
	const showmai = ref([])
	const maiprodata = ref([])
	const xiapro = ref([])
	const product = getstatusheight() + gettitleheight() + 'px'
	const navdata = ["在售中", "已下架"]
	const navindex = ref(0)
	const currenttype = ref(0)
	const xiadata = ref([])
	const showxia=ref([])
	const seachdata=ref()

	onShow(()=>{
		getlxdata()
		getproduxctdata()
	})
	const fabuprofusects=()=>{
		uni.navigateTo({
			url:"/pages/fabuproduct/fabuproduct"
		})
	}
	const seachok=()=>{
		currenttype.value=null
		if(navindex.value==0){
			showmai.value = maiprodata.value.filter(e => e.title ==seachdata.value )
		}else{
			showxia.value = xiapro.value.filter(e => e.title ==seachdata.value )
		}
	}
	const xiaproduct = e => {
		if (e.select) {
			xiadata.value.push(e.id)
			return
		}
		const index = xiadata.value.findIndex(i => i == e.id)
		xiadata.value.splice(index,1)
	}
	const getlxdata = async () => {
		const rudata = await getgetlxinfos()
		if (rudata.code == 200) {
			lxdata.value = rudata.data
			currenttype.value = rudata.data[0].lx
		}
	}
	const getproduxctdata = async () => {
		const rudata = await getgetproductinfos(useuserstore.shoperinfo.id, offset.value, limit.value)
		if (rudata.code == 200) {
			maiprodata.value = rudata.data.filter(e => e.status != 3)
			showmai.value = maiprodata.value.filter(e => e.lx == currenttype.value)
			xiapro.value = rudata.data.filter(e => e.status == 3)
			showxia.value= rudata.data.filter(e => e.status == 3)
		}
	}

	const navchange = e => {
		navindex.value = e
		xiadata.value=[]
	}
	const changetype = ee => {
		currenttype.value = ee
		showmai.value = maiprodata.value.filter(e => e.lx == ee)
	}
	const back = () => {
		uni.navigateBack()
	}
	const goxia=(status)=>{
		uni.showModal({
			title:"提示",
			content: status == 3 ? '下架提示' : '上架提示',
			success(e){
				if(e.cancel)return
				xiaproductss(status)
			}
		})
	}
	const xiaproductss=async (status)=>{
		const rudata=await xiaproducts(xiadata.value,status)
		if(rudata.code==200){
			uni.showToast({
				title:rudata.msg,
				icon:"none"
			})
			getproduxctdata()
		}
	}
</script>

<style lang="scss" scoped>
	.producybox {
		height: calc(100vh - v-bind(product));
		width: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		.prodctbox {
			flex: 1;
			height: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;

			.pro {
				flex: 1;
				display: flex;
				height: 100%;
				overflow: hidden;

				.l {
					width: 180rpx;
					background-color: #eeeeee;

					.selcetitem {
						background-color: #fff !important;
						color: #ff644d !important;
					}

					>view {
						width: 180rpx;
						height: 85rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 27rpx;
					}
				}

				scroll-view {
					flex: 1;
					overflow: hidden;
				}
			}

			.probottom {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 28rpx;
				border-top: 1rpx solid #e5e5e5;
			}
		}

		.seach {
			height: 130rpx;
			width: 100%;
			padding: 0 30rpx;
			display: flex;
			align-items: center;

			.seachbox {
				width: 100%;
				height: 90rpx;
				border-radius: 100rpx;
				background-color: #f7f7f7;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #7b7b7b;
				font-size: 27rpx;

				.iconfont {
					margin: 0 20rpx 0 40rpx;
					font-size: 25rpx;
				}
			}
		}

		.nav {
			height: 110rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.borr {
				color: #ff644d;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40%;
					height: 5rpx;
					background-color: #ff644d;
					border-radius: 5rpx;
				}
			}

			>view {
				height: 70rpx;
				width: fit-content;
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}
		}
	}

	.fixtop {
		background-color: #ff644d;

		.fixtop-l,
		.fixtop-c {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			color: #fff;
		}

		.fixtop-l {
			padding-left: 20rpx;

			.iconfont {
				transform: rotate(180deg);
				font-size: 25rpx;
			}
		}

		.fixtop-c {
			justify-content: center;
			font-size: 31rpx;
		}
	}
</style>